<template>
  <div class="container flex">
    <div class="container-left flex-center flex-column flex-align-items-center">
      <img src="@/assets/logo-light.png" class="pointer" @click="toPath('/')" />
      <div class="container-left-main">
        <p class="font-24-B">历史数据表明，</p>
        <p class="font-32-B">每天联系<span class="font-32-B">100</span>位红人，</p>
        <p class="font-32-B">平均收到<span class="font-32-B">22</span>位红人回复，</p>
        <p class="font-32-B"><span class="font-32-B">6</span>位红人可能达成合作，</p>
        <p class="font-32-B">平均带来<span class="font-32-B">18</span>的销售额提升！</p>
        <p class="font-24-B">今天你触达红人了吗？</p>
      </div>
      <div class="container-left-footer">
        <p class="font-24-B">让海外红人营销更简单</p>
        <p class="font-12">数据来源：Fatohot抽样数据，仅供参考</p>
      </div>
    </div>
    <div class="container-right flex-center flex-column flex-align-items-center">
      <div class="container-right-main">
        <div class="logo flex-center">
          <img src="@/assets/logo.png">
        </div>
        <p class="name font-18">海外红人智能营销云</p>
        <el-tabs v-model="form.loginType">
          <!-- <el-tab-pane label="短信登录" name="code">
            <div class="form-mobile flex">
              <p class="font-20">+86</p>
              <input type="text" v-model="form.mobile" maxlength="16" placeholder="手机号" class="font-16" />
            </div>
            <div class="form-code flex">
              <input type="text" v-model="form.code" maxlength="8" placeholder="验证码" class="font-16" />
              <p class="font-16">发送验证码</p>
            </div>
          </el-tab-pane> -->
          <el-tab-pane label="密码登录" name="password">
            <input v-model="form.phone" type="text" placeholder="手机号/子账号" maxlength="32" class="form-pwd-input">
            <input v-model="form.password" type="password" placeholder="密码" maxlength="24" class="form-pwd-input">
          </el-tab-pane>
        </el-tabs>
        <div class="submit-btn font-20-B pointer"
          :class="{ active: (form.phone && form.code) || (form.phone && form.password) }" @click="loginSubmit">登录</div>
        <div class="container-right-footer flex-between flex-align-items-center">
          <el-checkbox v-model="form.autoLogin" label="下次自动登录" />
          <div class="flex flex-align-items-center">
            <p class="font-12 pointer" @click="toPath('/forget')">忘记密码</p>
            <span class="line"></span>
            <p class="font-12 pointer" @click="toPath('/register')">注册</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import api from '@/api/index.js';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();

const form = ref({
  loginType: 'password',
  autoLogin: true
});

const toPath = path => {
  router.push(path);
}
const loginSubmit = () => {
  if (form.value.loginType === 'password') {
    pwdloginSubmit();
  }
}
// 密码登录提交
const pwdloginSubmit = () => {
  if (form.value.phone === '') {
    ElMessage.error('请输入手机号/子账号');
    return;
  }
  if (form.value.password === '') {
    ElMessage.error('请输入密码');
    return;
  }
  api.login.loginSubmit(form.value).then(res => {
    ElMessage.success('登录成功');
    localStorage.setItem('token', res.token);
    store.commit('tokenChange', res.token);
    store.commit('userInfoChange', {});
    router.push('/adminKanBan');
  }).catch(() => {
    ElMessage.error('用户名或密码错误');
  });
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
}

.container-left {
  width: 62.5vw;
  background: url('@/assets/bg-login-2.jpg') no-repeat;
  background-size: cover;
  position: relative;

  img {
    position: absolute;
    left: 50px;
    top: 32px;
    z-index: 10;
    width: 150px;
  }

  .container-left-main {
    p {
      color: #fff;

      &:first-child {
        margin-bottom: 8px;
      }

      &:last-child {
        margin-top: 26px;
      }

      span {
        color: @main-color;
      }
    }
  }

  .container-left-footer {
    position: absolute;
    left: 0;
    bottom: 28px;
    z-index: 10;
    width: 100%;
    text-align: center;

    p {
      color: #fff;

      &:first-child {
        margin-bottom: 24px;
      }
    }
  }
}

.container-right {
  width: 37.5vw;

  .container-right-main {
    width: 388px;

    &::v-deep {
      .is-checked {
        .el-checkbox__inner {
          background: @main-color !important;
        }

        .el-checkbox__label {
          color: #333;
        }
      }

      .el-checkbox__inner {
        border-color: @main-color !important;
      }

      .el-tabs__item.is-active {
        color: #333;
        font-weight: bold;
      }

      .el-tabs__item:hover {
        color: #333;
      }

      .el-tabs__active-bar {
        background: #333;
      }
    }

    .logo {
      margin-bottom: 24px;

      img {
        width: 250px;
      }
    }

    .name {
      color: #333;
      margin-bottom: 62px;
      text-align: center;
    }

    .form-mobile {
      height: 50px;
      margin-bottom: 20px;
      border-radius: 4px;
      overflow: hidden;

      p {
        width: 86px;
        background: @main-color;
        color: #fff;
        text-align: center;
        line-height: 50px;
      }

      input {
        width: 302px;
        padding: 0 48px;
        border: none;
        outline: none;
        background: #f4f4f4;
      }
    }

    .form-code {
      margin-bottom: 20px;
      height: 50px;

      input {
        outline: none;
        width: 132px;
        border-radius: 4px;
        background: #f4f4f4;
        border: 1px solid #dcdfe6;
        text-align: center;
      }

      p {
        width: 116px;
        margin-left: 14px;
        border-radius: 4px;
        background: @main-color;
        color: #fff;
        text-align: center;
        line-height: 50px;
      }
    }

    .form-pwd-input {
      width: 100%;
      height: 50px;
      outline: none;
      border-radius: 4px;
      background: #f4f4f4;
      border: 1px solid #dcdfe6;
      padding: 0 55px;
      margin-bottom: 20px;
    }

    .submit-btn {
      height: 56px;
      margin-bottom: 32px;
      border-radius: 4px;
      letter-spacing: 4px;
      background: #f4f4f4;
      color: #bbb;
      transition: all .32s;
      text-align: center;
      line-height: 56px;

      &.active {
        background: @main-color;
        color: #fff;
        transition: all .32s;
      }
    }

    .container-right-footer {
      p {
        color: #999;

        &:hover {
          color: #333;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #878787;
        margin: 0 12px;
      }
    }
  }
}
</style>
